<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="app">
        <div class="container">
            <cart-box></cart-box>
        </div>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const boxTitle = {
            props: ['uname'],
            template: `<div class="title">{{uname}}的商品</div>`,
        }
        const boxItem = {
            props: ['list'],
            template: `
                <div>
                    <div class="item" v-for="item in list" :key="item.id">
                        <img :src="item.img" />
                        <div class="name" v-text="item.name"></div>
                        <div class="change">
                            <a href="" @click.prevent="sub(item.id)">－</a>
                            <input type="number" class="num" :value="item.num" @blur="changeNum(item.id,$event)"/>
                            <a href="" @click.prevent="add(item.id)">＋</a>
                        </div>
                        <div class="del" @click="del(item.id)">×</div>
                    </div>
                </div>
            `,
            methods: {
                del: function(id) {
                    this.$emit("del-item", id);
                },
                changeNum: function(id, e) {
                    // console.log(id, parseInt(e.target.value));
                    this.$emit("change-num", {
                        id: id,
                        num: e.target.value,
                        type: 'change',
                    });
                },
                sub: function(id) {
                    this.$emit("change-num", {
                        id: id,
                        type: 'sub',
                    });
                },
                add: function(id) {
                    this.$emit("change-num", {
                        id: id,
                        type: 'add',
                    });
                },
                // @input="checkInput"
                // input只能输入数字
                checkInput: function(e) {
                    e.target.value = e.target.value.replace(/\D+/g, '')
                }
            }
        }
        const boxTotal = {
            props: ['list'],
            template: `
                <div class="total">
                    <span>总价：{{total}}</span>
                    <button>结算</button>
                </div>
            `,
            computed: {
                total: function() {
                    let t = 0;
                    this.list.forEach(e => {
                        t += e.price * e.num;
                    })
                    return t;
                }
            }
        }
        Vue.component('cart-box', {
            data: function() {
                return {
                    uname: '李四',
                    list: [{
                        id: 1,
                        name: 'TCL彩电',
                        price: 1000,
                        num: 2,
                        img: 'img/a.jpg'
                    }, {
                        id: 2,
                        name: '机顶盒',
                        price: 1000,
                        num: 1,
                        img: 'img/b.jpg'
                    }, {
                        id: 3,
                        name: '海尔冰箱',
                        price: 1000,
                        num: 1,
                        img: 'img/c.jpg'
                    }, {
                        id: 4,
                        name: '小米手机',
                        price: 1000,
                        num: 1,
                        img: 'img/d.jpg'
                    }, {
                        id: 5,
                        name: 'PPTV电视',
                        price: 1000,
                        num: 2,
                        img: 'img/e.jpg'
                    }]
                }
            },
            template: `
                <div class="cart">
                    <box-title :uname='uname'></box-title>
                    <box-item :list='list' @del-item='del' @change-num='changeNum'></box-item>
                    <box-total :list='list'></box-total>
                </div>
            `,
            components: {
                "box-title": boxTitle,
                "box-item": boxItem,
                "box-total": boxTotal,
            },
            methods: {
                del: function(id) {
                    const i = this.list.findIndex(e => e.id === id);
                    this.list.splice(i, 1);
                },
                changeNum: function(data) {
                    const e = this.list.find(e => e.id === data.id);
                    switch (data.type) {
                        case 'change':
                            e.num = data.num;
                            break;
                        case 'sub':
                            --e.num
                            break;
                        case 'add':
                            ++e.num
                            break;
                        default:
                            break;
                    }
                },
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>
</body>

</html>